<template>
    <div class="register">
        <!-- 顶部导航 -->
        <van-nav-bar
            left-arrow
            title="圈子注册"
            @click-left="$router.go(-1)"
        ></van-nav-bar>

        <!-- 用户名输入框 -->
        <van-field v-model="username" placeholder="用户名"></van-field>

        <!-- 用户密码输入框 -->
        <van-field
            v-model="password"
            type="password"
            placeholder="密码"
        ></van-field>

        <!-- 用户昵称输入框 -->
        <van-field v-model="nickname" placeholder="昵称"></van-field>

        <!-- 注册按钮 -->
        <van-button type="primary" @click="register">注册</van-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            username: "",
            password: "",
            nickname: ""
        };
    },
    methods: {
        async register() {
            const { username, password, nickname } = this;
            const res = await this.$http.post("/register", {
                username,
                password,
                nickname
            });
            console.log("res", res);
        }
    }
};
</script>

<style lang="less">
.register {
    height: 100vh;
    padding: 0 5px;
    background-color: #f8f8f8;

    .van-field,
    .van-button {
        margin-top: 20px;
    }

    .van-button {
        width: 100%;
    }
}
</style>
